<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>生成随机颜色案例</title>
</head>

<body>
  <script>
    // 生成随机颜色案例
    /*
     1. 封装一个颜色函数 getRandomColor 
     2. 返回rgb格式的颜色
     3. 返回十六进制的颜色
    */

    // 放入十六进制的数字
    let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']
    // 定义一个数组用来装五颜六色
    let newArr = []
    // 定义一个字符串用于拼接十六进制的颜色
    let str = ''
    let color = ''
    function getRandomColor(flag) {

      if (flag === true || flag ===null) {
        //输入五个数字
        for (let i = 0; i <= 5; i++) {
          // 生成随机数组中的数字
          let num = Math.floor(Math.random() * arr.length)

          newArr.push(arr[num])
        }
        // 遍历新的数组
        for (let i = 0; i < newArr.length; i++) {
          // 将十六进制的放入字符串拼接当中
          str += `${newArr[i]}`
        }
        // 输出十六进制的数字
          color = `#${str}`
      } else {
        // 随机生成0~255之间的数字
        for (let i = 0; i < 3; i++) {
          let num = Math.floor(Math.random() * (255 + 1))
          // 测试生成三个数字
          // console.log(num)
          // 将三个数字放入数字当中
          newArr.push(num)
        }
        // 遍历数组当中的数字，利用字符串拼接
        // for (let i = 0; i < newArr.length; i++) {
        //   str += `${newArr[i]}`
        // }
        // console.log(newArr)
         color = `rgb(${newArr[0]},${newArr[1]},${newArr[2]})`

      }
      
      return color1
    }

    let re = getRandomColor(true)
    document.write(re)

    // 测试代码
    // let re2 = getRandomColor(false)
    // console.log(re2)
    // let num = 255
    // console.log(num.toString(16))




  </script>
</body>

</html>